<template>
    <div class="homepage-hero-module">
        <Menu id="index-menu" mode="horizontal" :theme="theme1" active-name="1">
            <a class="csshub-btn" href="#">
                <span data-hover="Stage问卷调查">Stage问卷调查</span>
            </a>
        </Menu>
        <div class="video-container">
            <div class="filter">
            </div>
            <video autoplay loop class="fillWidth">
                <source src="http://localhost/video/For_Wes.mp4" type="video/mp4" />
            </video>
            <img id="stage-logo" src="http://localhost/userAvatar/timg.png" alt="Stage-logo" />
            <p id="stage-content">Stage问卷调查，打造专业问卷调查</p>
            <p id="stage-content1">用心做好每一份问卷</p>
            <Icon size="35" id="icon1" type="social-facebook" color="gray"></Icon>
            <Icon size="35" id="icon2" type="social-twitter-outline" color="gray"></Icon>
            <Icon size="35" id="icon3" type="social-googleplus-outline" color="gray"></Icon>
            <a href="javascript:void(0)" @click="goAnchor()">
                <Icon size="65" id="down" type="ios-arrow-down" color="white"></Icon>
            </a>
            <p id="power-by">Stage was made with by
                <Icon type="ios-heart-outline" color="pink"></Icon> the Rosagusa</p>
        </div>
    
        <div class="questionnaire-content">
            <p class="myp">Stgae</p>
            <div id="line">
    
                <Card class="col" v-for="item in questionnaire" :key="item.Qid">
                    <a :href="getTitleHref(item.Qid)">
                    <div style="text-align:center">
                        <img src="http://localhost/userAvatar/timg2.png">
                        <h3>{{ item.Title }}</h3>
                        <h4>[ID:{{item.Qid}}]</h4>
                    </div>
                    </a>
                </Card>
    
            </div>
        </div>
        <div id="myfooter">
            <p>Stage was made with by
                <Icon type="ios-heart-outline" color="pink"></Icon> the Rosagusa</p>
                <Back-top></Back-top>
        </div>
    </div>
</template>

<script>
import './js/video.js'
import axios from 'axios'
export default {
  data () {
    return {
      theme1: 'dark',
      questionnaire: []
    }
  },
  mounted: function () {
    var _this = this
    axios.get('http://localhost:7952/api/Questionnaire/GetAllQuestionnaire')
  .then(function (response) {
    _this.questionnaire = response.data
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })
  },
  methods: {
    goAnchor () {
      document.body.scrollTop = 688
    },
    getTitleHref (val) {
      return 'http://localhost:8091/#/Questionnaire/' + val
    }
  }
}
</script>

<style>
#myfooter {
    background-color: #333;
    height: 4%;
}

#myfooter p {
    font-size: 19.5px;
    text-align: center;
    color: #fff !important;
}

.col {
    display: inline-block;
    width: 25%;
    height: 10%;
    margin: 3.8%;
    background: gray;
}

.col img {
    width: 200px;
    height: 100px;
}

#line {
    margin-top: 1%;
    margin-left: 10%;
    width: 78%;
    border-top: 2px solid gray
}

.myp {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    color: #444444;
    font-size: 50px;
    margin-left: 43.5%;
    margin-top: 2%;
}

.questionnaire-content {
    min-height: 800px;
}

#stage-content {
    margin-top: 22%;
    margin-left: 31%;
    position: absolute;
    font-weight: 100;
    color: #fff !important;
    font-size: 34px;
}

#stage-content1 {
    margin-top: 26%;
    margin-left: 42%;
    position: absolute;
    font-weight: 100;
    color: #fff !important;
    font-size: 20px;
}



#stage-logo {
    margin-top: 8%;
    margin-left: 35%;
    position: absolute;
}

#down {
    margin-top: 42%;
    margin-left: 46%;
    position: absolute;
}

#icon1 {
    margin-top: 15%;
    margin-left: 1.5%;
    position: fixed;
}

#icon2 {
    margin-top: 19%;
    margin-left: 1%;
    position: fixed;
}

#icon3 {
    margin-top: 23%;
    margin-left: 1%;
    position: fixed;
}

#power-by {
    margin-top: 47%;
    margin-left: 85%;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 200;
    color: #fff !important;
    text-align: center;
    position: absolute;
}

#index-menu {
    background-color: #333;
    position: fixed;
    z-index: 99999999;
    width: 100%;
}

a.csshub-btn {
    text-align: center;
    position: relative;
    display: inline-block;
    margin-left: 39.5%;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    font-size: 30px;
    overflow: hidden;
    padding: 0 4px;
}

.csshub-btn span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.csshub-btn span::before {
    position: absolute;
    top: 100%;
    content: attr(data-hover);
    font-weight: 500;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.csshub-btn:hover span,
.csshub-btn:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}

.no-video .video-container video,
.touch .video-container video {
    display: none;
}

.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}

.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}

.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}

.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}

.video-container video.fillWidth {
    width: 100%;
}

</style>

